<template>
    <base-page :tabShow="tabShow" @scrollCall="scrollIndex" @lowerCall="lowerIndex" bgColor="#F4F4F4">

        <cu-custom slot="header" :isBack="true" bgColor="bg-white">
            <block slot="content">订单支付</block>
        </cu-custom>

        <view slot="center" style="height: 100%;">
            <view class="infoMsgs">
                <view class="successIcon" v-if="statusPay==2">
                    <image :src="staticImgUrl+'gouxuan.png'" mode=""></image>
                </view>
                <view class="tipTexts" v-if="statusPay==0">待支付</view>
                <view class="tipTexts" v-if="statusPay==1">支付中</view>
                <view class="tipTexts" v-if="statusPay==2">已支付</view>
                <view class="tipTexts" v-if="statusPay==3">已取消</view>
                <view class="twobtninfo">
                    <view class="goHome" @click="goHome">返回首页</view>
                    <view class="seeorders" @click="toOrders" v-if="pt==false">查看订单</view>
                    <view class="seeorders seepintuanorder" @click="toPinTuanDetails" v-if="pt==true" style="border:0;color:#FFFFFF;background: linear-gradient(90deg, #ED7150 0%, #E94D60 100%);">
                        邀请好友</view>
                </view>
            </view>
            <!-- 猜你喜欢 -->
            <block>
                <view class="">
                    <!-- 					<view class="df-cen">
						<view class="goods-line"></view>
						<view class="goods-line-title">猜你喜欢</view>
						<view class="goods-line"></view>
					</view> -->
                    <view class="cnxhicon">
                        <image :src="staticImgUrl + 'youlikes.png'" mode=""></image>
                    </view>
                    <view style="padding: 20rpx;">
                        <goods-waterfall-flow :allList="goodsList" @goodsFlowCall="goodsFlowBtn">
                        </goods-waterfall-flow>
                    </view>
                    <view class="cu-load over" v-if="page_count && recommendObj.page >= page_count">
                    </view>
                </view>
            </block>

        </view>

    </base-page>
</template>

<script>
import goodsWaterfallFlow from '@/components/global/goods-waterfall-flow.vue'; //瀑布流组件
import {
    getEnv
} from "@/common/js/env.js"
export default {
    data() {
        return {
            recommendTypeTwo: false,
            goodsList: [],
            recommendObj: {
                page: 1,
                page_size: 10
            },
            page_count: null, // 总页数
            statusPay: 2,
            pt: false,
            queryObj: null,
            timer: null,
            tabShow: false
        };
    },
    components: {
        goodsWaterfallFlow
    },
    mounted() {
        // #ifdef H5
        if (getEnv().includes("NativeApp")) {
            this.tabShow = false
        } else {
            this.tabShow = true
        }
        // #endif
    },
    onLoad(e) { },
    onShow() {
        this.getGoodsList()
        let queryObj = this.$Router.queryObj();
        this.queryObj = queryObj
        if (queryObj.out_trade_no != undefined) {
            this.getpayStatus(queryObj.out_trade_no)
        }
    },
    destroyed() {
        clearTimeout(this.timer)
    },
    onUnload() {
        clearTimeout(this.timer)
    },
    methods: {
        toPinTuanDetails() {
            this.$Apis.getPintuanOrderInfo({
                order_no: this.queryObj.order_no
            }).then(res => {
                console.log("res=>", res)
                debugger
                this.$Router.reLaunch({
                    path: '/otherpages/pintuan/spell_details',
                    query: {
                        id: res.id
                    }
                });
            })
        },
        /**
         * pay_status
         * 0.待支付 1. 支付中 2. 已支付 -1已取消
         */
        getpayStatus(out_trade_no) {
            console.log(out_trade_no,'out_trade_noout_trade_noout_trade_no')
            this.$Apis.getpaystatusNow({
                out_trade_no: out_trade_no
            }).then(res => {
                this.statusPay = res.pay_status
        console.log(!this.queryObj.pt,res,'this.queryObj.pt')

                if (!this.queryObj.pt) {
                    if (res.pay_status == 2 || res.pay_status == -1) {
                        return
                    }
                    this.timer = setTimeout(() => {
                        console.log('进来了')
                        this.getpayStatus(this.queryObj.out_trade_no)
                    }, 2000)
                }

                if (this.queryObj.pt != undefined && res.pay_status == 2 && Number(this.queryObj.group_id) !=
                    0) {
                    this.pt = true
                    this.$Apis.getPintuanOrderInfo({
                        order_no: this.queryObj.order_no
                    }).then(res1 => {
                        console.log("res1=>", res1)
                        this.$Router.reLaunch({
                            path: '/otherpages/pintuan/spell_details',
                            query: {
                                id: res1.id
                            }
                        });
                    })
                }

            })
        },
        // 监听页面滚动事件
        scrollIndex(e) { },
        // 猜你喜欢滚动到底部
        lowerIndex() {
            if (this.recommendType) return false;
            this.recommendType = true;
            this.recommendObj.page++
            this.getGoodsList();
        },
        // 获取猜你喜欢
        getGoodsList() {
            if (!this.page_count || (this.page_count && this.recommendObj.page < this.page_count)) {
                this.$Apis.getGoodsSkuRecommend(this.recommendObj).then(res => {
                    this.recommendType = false;
                    this.page_count = res.page_count;
                    this.goodsList = this.goodsList.concat(res.list);
                });
            }
        },
        // 商品瀑布流回调
        goodsFlowBtn(item) {
            this.$Router.push({
                path: '/shopPages/goods/detail',
                query: {
                    goods_id: item.sku_id,
                    is_id: item.sku_id,
                    type: 1
                }
            });
        },
        goHome() {
            // #ifdef H5
            if (this.isNativeApp()) {
                this.$Sdk.jumpHome()
                return false
            }
            // #endif
            uni.reLaunch({
                url: '/pages/index/index'
            });
        },
        toOrders() {
            this.$Router.push({
                path: '/shopPages/my/orderlist',
                query: {
                    inx: 0
                }
            });
        }
    }
};
</script>

<style lang="scss">
.cnxhicon {
    width: 662rpx;
    height: 198rpx;
    margin: 0 auto;
}

image {
    width: 100%;
    height: 100%;
}

.infoMsgs {
    width: 100%;
    height: 380rpx;
    background-color: #ffffff;
    padding-top: 40rpx;
}

.successIcon {
    width: 72rpx;
    height: 72rpx;
    margin: 0 auto;
}

.tipTexts {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222222;
    text-align: center;
    padding-top: 24rpx;
    padding-bottom: 40rpx;
}

.twobtninfo {
    display: flex;
    align-items: center;
    justify-content: center;

    .goHome {
        width: 240rpx;
        height: 80rpx;
        border: 1rpx solid #cccccc;
        border-radius: 40rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        text-align: center;
        line-height: 80rpx;
        margin-right: 40rpx;
    }

    .seeorders {
        width: 240rpx;
        height: 80rpx;
        border: 1rpx solid #cccccc;
        border-radius: 40rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        text-align: center;
        line-height: 80rpx;
    }

    .seepintuanorder {
        -webkit-animation: scaleDraw 2s ease-in-out infinite;
    }
}

@keyframes scaleDraw {
    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
        transform: scale(1);
        /*开始为原始大小*/
    }

    25% {
        transform: scale(1.1);
        /*放大1.1倍*/
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.1);
    }
}
</style>
